<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单</title>
	</head>
	<style type="text/css">
		h1{
			text-align: center;
		}
		.biaodan {
			padding: 45px;
			margin: 0 auto;
			border: solid #B0B0B0 1px;
			border-radius: 8px;
			box-shadow: 2px 2px 5px #B0B0B0;
			width: 750px;
			height: 480px;
			display: flex;
			flex-direction: column;
			font-size: 16px;	
			font-family: "微软雅黑";		
			line-height: 40px;
		}
		span{
			display: inline-block;
			text-align: right;
			width: 100px;
			padding-right: 6px;
		}
		#jianjie{
			flex-wrap:wrap;
		}
		#bottom{
			display: flex;
			justify-content: center;
			
		}
	</style>
	<body>
		<h1>表单</h1>
		<div class="biaodan">
			<form  method="post">
				
				<p><div id="yonghuming">
					<span>用户名：</span><input type="text" id=yhm placeholder="请输入用户名" 
						style="outline: none;border: none;border-bottom: 1px solid #000000;"/>
						
					<button style="border: none;border-bottom: 1px solid #000000; " 
					onclick="getValue()">校验用户名是否合法</button>
				</div></p>
				
				
				<p><div id="mima">	
					<span>密码：</span>
					<input type="password" name="pwd" id="psw" placeholder="请输入密码" 
						style="outline: none;border: none;border-bottom: 1px solid #000000;"/>
						<span id="pwdMsg" ></span>
				</div></p>
				
				<p><div id="mima">	
					<span>确认密码：</span>
					<input type="password" name="config" id="config" placeholder="请再次输入密码"  
						style="outline: none;border: none;border-bottom: 1px solid #000000;"/>
						<span id="configMsg">
				</div></p>
				
				
				<p><div id="sex1">	
					<span>性别：</span><input type="radio" name="sex" id="sex"  value="男" />男
						<input type="radio" name="sex" id="sex" value="女"/>女
						<button onclick="showSex()">显示性别</button>
				</div></p>
				
				
				<p><div id="hobby1">
					<span>爱好：</span>
					<input type="checkbox" value="篮球" id="hobby"/>篮球
					<input type="checkbox" value="跑步" id="hobby"/>跑步
					<input type="checkbox" value="游泳" id="hobby"/>游泳
					<input type="checkbox" value="全选" name="selAll" id="selAll" onclick="selectAll()">全选
					<button onclick="showInst()">显示选择的爱好</button>
				</div></p>
				
				
				<p><div id="subject1">
					<span>专业：</span><select id="subject" onchange="showsub()">
						<option value="计算机">计算机</option>
						<option value="软件技术">软件技术</option>
				</select>
				</div></p>
				
				
				<p><div id="jianjie">
					<span>个人简介：</span>
					<textarea id="note" name="note"  onkeydown="validateNote()">
						
					</textarea>
					<span id="noteMsg"></span>
	    			<button type="submit" id="sub" name="sub">保存</button>
				</div></p>
				
				
				<p><div id="touxiang">
					<span>头像：</span><input type="file" />
				</div></p>
				
				
				<p><div id="bottom">	
					<input type="button" value="提交" id="save" style="margin-right: 30px;"
						onclick="getValue2()"/>
					
					<input type="button" value="重置" id="reset" style="margin-left: 30px;"
						onclick="getValue3()"/>
				</div></p>
				
			</form>
		</div>
	</body>
	<script type="text/javascript" src="Js/pwdValidateJs.js">>
		//2密码
		window.onload=function () {
		    var pwdElement=document.getElementById("pwd");
		    var configElemrnt=document.getElementById("config");
		    pwdElement.addEventListener("blur",validatePwd, false);
		    configElemrnt.addEventListener("blur",validateConfig,false);
		}
		 
		function validatePwd(){
		    return validateEmpty("pwd");
		}
		 
		function validateConfig(){
		    if (validateEmpty("config")){
		        return validateRepeat("pwd","config");
		    }
		    return false;
		}
		 
		function validateEmpty( elementname ) {
		    var objElement=document.getElementById(elementname);
		    var msgElement=document.getElementById(elementname+"Msg");
		    var str = objElement.value.replace(/(^\s*)|(\s*$)/g, '');
		    if (str == '' || str == undefined || str == null){
		        msgElement.innerHTML="<font color='#dc143c'>输入内容无效！</font>";
		        return false;
		    }else{
		        msgElement.innerHTML="<font color='#006400'>输入内容有效！</font>";
		        return true;
		    }
		}
		 
		function validateRepeat(srcName, desName) {
		    var srcElement=document.getElementById(srcName);
		    var desElement=document.getElementById(desName);
		    var desMsgElement=document.getElementById(desName+"Msg");
		    if (srcElement.value==desElement.value) {
		        desMsgElement.innerHTML="<font color='#006400'>输入一致！</font>";
		        return true;
		    }else{
		        desMsgElement.innerHTML="<font color='#dc143c'>两次输入不一致！</font>";
		        return false;
		    }
		 
		}

	</script>
	<script type="text/javascript" >
	
		//1用户名
		function getValue(){
			let oInput=document.getElementById("yhm")
			alert(oInput.value) 
		}
		

		//3性别
		function showSex(){
			let oInput=document.getElementById("sex")
			alert(oInput.value)
		}
		
		
		//4爱好
		function showInst(){
            var hobby=document.all("hobby")
            var show="你选择的爱好是：";
            for (i=0;i<hobby.length;i++){
                if (hobby[i].checked){
                    show+=hobby[i].value+"、";
 
                }
            }
            alert(show);
        }
		
        function selectAll() {
            var seleElement=document.getElementById("selAll");
            var hobby=document.all("hobby");
            for (i=0;i<hobby.length;i++){
                hobby[i].checked=seleElement.checked;
            }
        }
		
		
		//5专业
		function showsub(){
            var subElement=document.getElementById("subject")
            alert("你的专业是："+subElement.value);
        }
		
		
		//6个人简介
		function validateNote(){
            var noteElement=document.getElementById("note");
            var msgElement=document.getElementById("noteMsg");
            // msgElement.innerHTML="输入数据长度："+noteElement.value.length;
            if (noteElement.value.length<500) {
                msgElement.innerHTML="<font color='green'>还可以输入"+(500-noteElement.value.length)+"</font>";
                document.getElementById("sub").disabled=false;
            }
            else{
                msgElement.innerHTML="<font color='red'>输入文字数目超过上限！</font>";
                document.getElementById("sub").disabled=true;
            }
 
        }
		
		
		//7提交 重置
		function getValue2(){
			let oInput=document.getElementById("save")
			alert("提交成功") 
		} 
		
		function getValue3(){
			let oInput=document.getElementById("reset")
			alert("重置成功") 
		}
	</script>
</html>

